<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!doctype html>
<html lang="zh">
	<style>
		/* 自定义样式 */
		.icon-circle {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.flight-timeline .timeline-item {
			padding: 6px 12px;
			border-radius: 20px;
			background: rgba(0,0,0,0.03);
		}
		
		.price-display .price-badge {
			background: linear-gradient(135deg, #4CAF50, #45a049);
			color: white;
			padding: 8px 15px;
			border-radius: 25px;
			display: inline-flex;
			align-items: center;
		}
		
		.price-badge .price-icon {
			font-size: 0.9em;
			margin-right: 6px;
		}
		
		.price-badge .price-number {
			font-weight: 600;
			letter-spacing: 0.5px;
		}
		
		.btn-edit {
			background: rgba(41, 98, 255, 0.1);
			color: #2962ff;
			border: 1px solid rgba(41, 98, 255, 0.3);
			padding: 8px 15px;
			border-radius: 20px;
			transition: all 0.3s;
		}
		
		.btn-edit:hover {
			background: #2962ff;
			color: white;
			transform: translateY(-2px);
			box-shadow: 0 3px 8px rgba(41, 98, 255, 0.2);
		}
		
		.flight-path .path-line {
			position: relative;
			flex-grow: 1;
			margin: 0 10px;
		}
		
		.dotted-line {
			border-top: 2px dashed #ddd;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
		}
		
		.city-name {
			font-weight: 500;
			margin-top: 5px;
		}
		</style>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="通辽航空管理平台 ">
		<title>通辽航空管理平台 </title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="fonts/style.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/css.css">
	</head>
	<body>
		<header class="header">
			<div class="container-fluid">
				<div class="row gutters">
					<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-9">
						<a href="admin_index.jsp" class="logo"> <img src="img/logo.png">通辽航空管理平台  </a>
					</div>
					<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-3">
						<ul class="header-actions">
							<li class="dropdown">
								<a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true">
									<span class="user-name">管理员</span>
									<span class="avatar">NR<span class="status busy"></span></span>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userSettings">
									<div class="header-profile-actions">
										<a href="hospital-add-doctor.html"><i class="icon-user1"></i> My Profile</a>
										<a href="account-settings.html"><i class="icon-settings1"></i> Account Settings</a>
										<a href="hospital-reviews.html"><i class="icon-activity"></i> Activity Logs</a>
										<a href="login.html"><i class="icon-log-out1"></i> Sign Out</a>
									</div>
								</div>
							</li>
						</ul>						
					</div>
				</div>
			</div>
		</header>
		<div class="container-fluid">


			<!-- Navigation start -->
			<nav class="navbar navbar-expand-lg custom-navbar">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#royalHospitalsNavbar" aria-controls="royalHospitalsNavbar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i></i>
						<i></i>
						<i></i>
					</span>
				</button>
				<div class="collapse navbar-collapse" id="royalHospitalsNavbar">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link dropdown-toggle active-page" href="FlightsServlet?pageNo=1">
								<i class="icon-home nav-icon"></i>
								首页</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="doctoRs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-person_pin nav-icon"></i>
								数据录入
							</a>
							<ul class="dropdown-menu" aria-labelledby="doctoRs">
								<li><a class="dropdown-item" href="flight_insert.jsp">录入航班</a></li>
								<li><a class="dropdown-item" href="aircraft_insert.jsp">录入飞机</a></li>
							</ul>
						</li>
					
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="formsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment_turned_in nav-icon"></i>
								申请管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="formsDropdown">
								<li><a class="dropdown-item " href="QuitsServlet?pageNo=1">退票申请列表</a></li>
								<li><a class="dropdown-item " href="AuditsServlet?pageNo=1">改签申请列表</a></li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle " href="#" id="uiElementsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-assignment nav-icon"></i>
								数据管理
							</a>
							<ul class="dropdown-menu" aria-labelledby="uiElementsDropdown">
								<li><a class="dropdown-item" href="${pageContext.request.contextPath}/UserList?pageNo=1">用户数据管理</a></li>
								<li><a class="dropdown-item" href="${pageContext.request.contextPath}/AircraftListServlet?pageNo=1">飞机数据管理</a></li>

							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="loginDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="icon-burst_mode nav-icon"></i>
								注册申请 
							</a>
							<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="loginDropdown">
								<li><a class="dropdown-item " href="RegisterListServlet?pageNo=1">用户注册申请</a></li>
							</ul>
						</li>
					
					</ul>
				</div>
			</nav>
		
			<div class="main-container">
				<div class="page-header">
					<ol class="breadcrumb">
						<li class="breadcrumb-item active">航班大厅 </li>
					</ol>
				</div>
				<div class="content-wrapper">
					<div class="card shadow-sm">
						<div class="card-body p-0">
							<div class="table-responsive">
								<table class="table table-hover mb-0">
									<thead class="thead-light">
										<tr>
											<th style="min-width: 180px">航班信息</th>
											<th style="min-width: 120px">机型</th>
											<th style="min-width: 200px">时刻表</th>
											<th style="min-width: 220px">航线</th>
											<th style="min-width: 100px">票价</th>
											<th style="min-width: 120px">操作</th>
										</tr>
									</thead>
									<tbody>
										<c:choose>
											<c:when test="${not empty list}">
												<c:forEach items="${list}" var="flight">
													<tr class="align-middle">
														<!-- 航班号 -->
														<td>
															<div class="d-flex align-items-center">
																<div class="icon-circle bg-primary mr-3">
																	<i class="fa fa-plane text-white"></i>
																</div>
																<div>
																	<h5 class="mb-0 text-dark">${flight.flightId}</h5>
																	<small class="text-muted">航班编号</small>
																</div>
															</div>
														</td>
														
														<!-- 机型 -->
														<td>
															<div class="d-flex align-items-center">
																<div class="icon-circle bg-info mr-3">
																	<i class="fa fa-cogs text-white"></i>
																</div>
																<div>
																	<h5 class="mb-0 text-dark">${flight.aircraftId}</h5>
																	<small class="text-muted">机型编号</small>
																</div>
															</div>
														</td>
														
														<!-- 时刻表 -->
														<td>
															<div class="flight-timeline">
																<div class="timeline-item departure">
																	<i class="fa fa-plane-departure text-danger mr-2"></i>
																	<span class="font-weight-bold">${flight.departureTime}</span>
																</div>
																<div class="timeline-item arrival mt-3">
																	<i class="fa fa-plane-arrival text-success mr-2"></i>
																	<span class="font-weight-bold">${flight.arrivalTime}</span>
																</div>
															</div>
														</td>
														
														<!-- 航线 -->
														<td>
															<div class="flight-path">
																<div class="d-flex align-items-center">
																	<div class="path-start">
																		<i class="fa fa-map-marker-alt text-danger fa-lg"></i>
																		<div class="city-name">${flight.origin}</div>
																	</div>
																	<div class="path-line mx-2">
																		<div class="dotted-line"></div>
																		<i class="fa fa-long-arrow-alt-right text-muted"></i>
																	</div>
																	<div class="path-end">
																		<i class="fa fa-map-marker-alt text-success fa-lg"></i>
																		<div class="city-name">${flight.destination}</div>
																	</div>
																</div>
															</div>
														</td>
														
														<!-- 票价 -->
														<td>
															<div class="price-display">
																<div class="price-badge">
																	<span class="price-icon">¥</span>
																	<span class="price-number">${flight.price}</span>
																</div>
															</div>
														</td>
														
														<!-- 操作 -->
														<td>
															<form action="FlightDetailsServlet" method="get">
																<button class="btn btn-edit">
																	<input type="hidden" name="flightId" value= "${flight.flightId}">
																	<i class="fa fa-pen-alt mr-2"></i>
																	修改信息
																</button>
															</form>
														</td>
													</tr>
												</c:forEach>
											</c:when>
											<c:otherwise>
												<tr>
													<td colspan="6" class="text-center py-5">
														<div class="empty-state">
															<i class="fa fa-plane-slash fa-4x text-muted mb-3"></i>
															<h3 class="text-muted">暂无航班数据</h3>
															<p class="text-muted">暂时没有可显示的航班信息</p>
														</div>
													</td>
												</tr>
											</c:otherwise>
										</c:choose>
									</tbody>
								</table>
							</div>



							
							<!-- 分页 -->
							<c:if test="${box.totalPages > 1}">
								<div class="card-footer bg-white">
									<nav aria-label="Page navigation">
										<ul class="pagination justify-content-center mb-0">
											<li class="page-item ${box.pageNo == 1 ? 'disabled' : ''}">
												<a class="page-link" 
													href="FlightsServlet?pageNo=${box.pageNo - 1}" 
													aria-label="Previous">
													<span aria-hidden="true">&laquo;</span>
												</a>
											</li>
											
											<c:forEach begin="1" end="${box.totalPages}" var="i">
												<li class="page-item ${i == box.pageNo ? 'active' : ''}">
													<a class="page-link" 
														href="FlightsServlet?pageNo=${i}">${i}</a>
												</li>
											</c:forEach>
											
											<li class="page-item ${box.pageNo == box.totalPages ? 'disabled' : ''}">
												<a class="page-link" 
													href="FlightsServlet?pageNo=${box.pageNo + 1}" 
													aria-label="Next">
													<span aria-hidden="true">&raquo;</span>
												</a>
											</li>
										</ul>
									</nav>
								</div>
							</c:if>

						</div>
					</div>
				</div>
			</div>

			<footer class="main-footer">© Royal Hospitals 2025</footer>

		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/moment.js"></script>
		<script src="js/echarts.min.js"></script>

		<script src="laydate/laydate.js" type="text/javascript"></script> 
		<script>
		lay('#version').html('-v'+ laydate.v);
		laydate.render({
			elem: '#date'
		  ,range: true
		  ,theme: '#13a98c'
		});
		</script>
		<script>
			$(function () {
				echarts_1();
			function echarts_1() {
			var myChart = echarts.init(document.getElementById('echart1'));
			var uploadedDataURL = "/asset/get/s/data-1547533200844-7eBMgp66l.png";
			 var dataIPSxAxis = ['1月', '2月', '3月', '4月 ', '5月 ', '6月', '7月', '8月'];
			 var dataIPS = [60, 140, 60, 350, 100, 160, 60, 90];
			 option = {
				 tooltip: { trigger: 'axis',
		},
				 color: ["#0080ff", "#4cd5ce"],
				 grid: {
					 left: '20',
					right: '35',
					top:'10%',
					bottom: '0%',
					 containLabel: true
				 },
				 xAxis: [{
					 type: 'category',
					 boundaryGap: false,
					 data: dataIPSxAxis,
					 axisLabel: {
						 show: true,
						 textStyle: {
							 color: '#777',
							 //fontSize: 12,
						 },
					 },
					 axisLine: {
						 show: false
					 }
				 }],
			
				 yAxis: [{
					 type: 'value',
					 axisLine: {
						 onZero: false,
						 show: false,
					 },
					 axisLabel: {
						 show: true,
						 textStyle: {
							 color: '#777' //字体颜色
						 }
					 }, 
					 splitNumber: 3,
					  splitLine:{
							show:true,
							lineStyle:{
								color:'#eee',
								type:'dotted'
							}
						},
				 }],
				 series: [
					 {
						 name: '预警',
						 type: 'line',
						 smooth: true,
						 //  symbol: "none", //去掉折线点
						 stack: 100,
						 lineStyle: {
                normal: {
                    width:3,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#3787ff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#9232ff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(0,0,0, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#fbe102',
                    borderWidth: 10,
                    borderColor: "#fbe102"
                }
            },
              areaStyle:{
				
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,98,245,.2)' ,
                }, {
                    offset: 1,
                    color: 'rgba(0,98,245,.0)' ,
                }], false),
                
              },symbolSize: 0, //折线点的大小
						 data: dataIPS,
					 },
				 ]
			 };
					myChart.setOption(option);
					window.addEventListener("resize",function(){
						myChart.resize();
					});
				}
			
			})
		</script>
	 
	</body>
</html>